<template>
  <div v-memo="[count]">
    <div>App</div>
    <div>{{ count }}</div>
    <button @click="count++">按钮</button>
  </div>
</template>

<script lang="ts" setup>
/*
  1. 常用指令
    v-if / v-else-if / v-else 条件渲染（控制元素的显示和隐藏）
    v-show 条件渲染（控制元素的显示和隐藏）
      v-if 和 v-show 区别：
        1. v-if隐藏时，销毁元素（卸载组件）
        2. v-show隐藏时，通过display:none来隐藏的
      结论：频繁切换用v-show，不频繁用v-if
    v-for 遍历展示（列表渲染）
      key属性作用：在diff算法中，尽可能复用相同key的元素，更新性能更好
      key属性取值：一般用id，用index可能导致更新性能不好
      
      v-for和v-if优先级：
        vue2是v-for更高
        vue3是v-if更高
    v-on 绑定事件 @
      事件修饰符 .prevent .stop .once .self
      按键修饰符 .enter .13
    v-model 双向数据绑定
      双向数据绑定原理
        - 给普通input元素（text）绑定，绑定的是value属性和input事件
        - 给单选（radio）或多选（checkout）绑定，绑定的是checked属性和change事件
        - 给下拉列表（select）绑定，绑定的是value属性和change事件
        - 给组件绑定
          - vue2中，组件绑定和普通元素绑定效果一样
          - vue3中，默认绑定modelValue属性和update:modelValue事件
    v-bind 单向数据绑定（强制绑定数据） :
    v-slot 插槽 #
      默认插槽、具名插槽和作用域插槽
    v-memo(新增的指令)
  2. 不常用指令
    v-text 设置元素textContent
    v-html 设置元素innerHTML
    v-once 元素只解析渲染一次，后续再也不变了
    v-pre  跳过解析，直接渲染最原始的内容
    v-cloak 防止解析时渲染表达式(用于隐藏尚未完成编译的 DOM 模板。)
      [v-cloak]{ display: none; }
*/
import { ref } from "vue";

const count = ref(0);
</script>

<style></style>
